<template>
	<div class="space-category-analyze">
		<a-card title="空间资源分类分析">
			<v-chart :option="options" style="height: 320px; max-width: 100%" :loading="loading" />
		</a-card>
	</div>
</template>

<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed, ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { getSpaceCategoryAnalyzeUsingPost } from '@/api/spaceAnalyzeController'
import { DEFAULT_CATEGORY } from '@/constants/picture'

interface Props {
	queryAll?: boolean
	queryPublic?: boolean
	spaceId?: any
}

const props = withDefaults(defineProps<Props>(), {
	queryAll: false,
	queryPublic: false,
})
// 加载状态
const loading = ref(false)

//图表数据
const dataList = ref<API.SpaceCategoryAnalyzeResponse[]>([])
// 获取数据
const fetchData = async () => {
	loading.value = true
	// 转换搜索参数
	const res = await getSpaceCategoryAnalyzeUsingPost({
		queryAll: props.queryAll,
		queryPublic: props.queryPublic,
		spaceId: props.spaceId,
	})
	if (res.data.code === 0) {
		dataList.value = res.data.data ?? []
	} else {
		message.error('获取空间分类分析数据失败：' + res.data.message)
	}
	loading.value = false
}

/**
 * 监听变量，参数改变时触发数据的重新加载
 */
watchEffect(() => {
	fetchData()
})

// 图表配置（使用柱状图）
const options = computed(() => {
	const categories = dataList.value.map((item) => item.category || DEFAULT_CATEGORY)
	const countData = dataList.value.map((item) => item.count)
	const sizeData = dataList.value.map((item) => ((item.totalSize || 0) / (1024 * 1024)).toFixed(2)) // 转为 MB

	return {
		tooltip: { trigger: 'axis' },
		legend: { data: ['图片数量', '图片总大小'], top: 'bottom' },
		xAxis: { type: 'category', data: categories },
		yAxis: [
			{
				type: 'value',
				name: '图片数量',
				axisLine: { show: true, lineStyle: { color: '#5470C6' } }, // 左轴颜色
			},
			{
				type: 'value',
				name: '图片总大小 (MB)',
				position: 'right',
				axisLine: { show: true, lineStyle: { color: '#91CC75' } }, // 右轴颜色
				splitLine: {
					lineStyle: {
						color: '#91CC75', // 调整网格线颜色
						type: 'dashed', // 线条样式：可选 'solid', 'dashed', 'dotted'
					},
				},
			},
		],
		series: [
			{ name: '图片数量', type: 'bar', data: countData, yAxisIndex: 0 },
			{ name: '图片总大小', type: 'bar', data: sizeData, yAxisIndex: 1 },
		],
	}
})
</script>

<style scoped lang="scss"></style>
